<template>
  <div class="dashboard-editor-container">
    <el-card class="box-card" style="padding-bottom: 30px">
      <div slot="header" class="clearfix">
        <div class="el-page-header">
          <div class="el-page-header__left" @click="goBack">
            <i class="el-icon-back"></i>
            <div class="el-page-header__title">返回</div>
          </div>
          <div class="el-page-header__content">邮件发送日志详情</div>
        </div>
      </div>
      <div class="dataFrom">
        <el-form ref="form" :model="form" label-position="left" label-width="240px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="接收人" prop="toAddr">
                <el-input v-model="form.toAddr" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  接收人
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="抄送人" prop="ccAddr">
                <el-input v-model="form.ccAddr" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  抄送人
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="密送人" prop="bccAddr">
                <el-input v-model="form.bccAddr" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  密送人
                </div>
                <i class="el-icon-info hex-form-inf-icon" @click="onOperInf($event)" data-status="off"></i>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="附件路径" prop="attachmentPath">
                <el-input v-model="form.attachmentPath" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  附件路径
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="主题" prop="subject">
                <el-input v-model="form.subject" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  主题
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="发送时间" prop="sendTime">
                <el-input v-model="form.sendTime" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  发送时间
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="发送状态" prop="sendStatus">
                <el-select v-model="form.sendStatus" :disabled="true" style="width: 100%">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  发送状态
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="创建时间" prop="crtTs">
                <el-input v-model="form.crtTs" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  创建时间
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="是否html" prop="isHtml">
                <el-select v-model="form.isHtml" :disabled="true" style="width: 100%">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  是否html
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="邮件内容" prop="content">
                <el-input type="textarea" :rows="5" v-model="form.content" :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="data_from_el-col">
              <div class="hex-form-inf">
                <div class="hex-form-inf-content">
                  邮件内容
                </div>
                <i class="el-icon-info hex-form-inf-icon" data-status="off" @click="onOperInf($event)" />
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "alarmDetails",
  props:{
    page:{
      type:Object,
      default:null
    },
    details:{
      type:Object,
      default:null
    }
  },
  data(){
    return{
      form:{},
      options:[
        {label:'未发送',value:'0'},
        {label:'已发送',value:'1'}
      ],
      options1:[
        {label:'是',value:'1'},
        {label:'否',value:'0'}
      ],
    }
  },
  created() {
    this.form=this.details
  },
  methods:{
    goBack(){
      this.page.list=true
    },
    onOperInf: function(e) {
      let status = e.target.getAttribute('data-status');
      let previousNode = e.target.previousElementSibling;
      if ("off" == status) {
        previousNode.setAttribute('class', 'hex-form-inf-content-show');
        e.target.setAttribute('data-status', 'on');
      } else {
        previousNode.setAttribute('class', 'hex-form-inf-content');
        e.target.setAttribute('data-status', 'off');
      }
    },
  }
}
</script>

<style scoped>
.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}
.hex-form-inf .hex-form-inf-content-show{
  padding: 0 4%;
  background-color: #F7F9FA;
  border: 1px solid #347DE1;
  border-radius: 8px;
}
.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;

}
.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}
.hex-form-inf .hex-form-inf-content-show{
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}
.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}
.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}
</style>
